<%@ include file="/WEB-INF/views/common/includes.jsp"%>


<head>
<script type="text/javascript">
	function addOpt() {

		var amount = document.getElementById("amount");
		var selectedAmount = amount.options[amount.selectedIndex].text;
		var much = document.getElementById("much");
		var selectedMuch = much.options[much.selectedIndex].text;
		var ingredient = document.getElementById("ingredient");
		var selectedIngredient = ingredient.options[ingredient.selectedIndex].text;
		var style = document.getElementById("style");
		var selectedStyle = style.options[style.selectedIndex].text;

		var newIngredient = selectedAmount + "/" + selectedMuch + "/"
				+ selectedIngredient + "/" + selectedStyle;

		var select = document.getElementById("myselect");
		select.options[select.options.length] = new Option(newIngredient);
	}
	
//delete from the selectbox 
	function removeItem(selectbox)
	{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
	if(selectbox.options[i].selected)
	selectbox.remove(i);
	}
	}

	function selectAllOptions(id) {
		var ref = document.getElementById(id);

		for (i = 0; i < ref.options.length; i++)
			ref.options[i].selected = true;
	}
	
	function isNumberKey(evt){
	    var charCode = (evt.which) ? evt.which : evt.keyCode
	    return !(charCode > 31 && (charCode < 48 || charCode > 57));
	}


</script>
</head>
<body>
	<c:if test="${not empty param.success}">
		<div class="alert alert-success">
			<button type="button" class="close" data-dismiss="alert">
				<i class="icon-remove"></i>
			</button>
			<i class="icon-ok-sign"></i>You have successfully edited your<strong> profile!</strong>
		</div>
	</c:if>
	<section class="panel">
		<div class="panel-body">
			<form method="POST" action="saveProfile" enctype="multipart/form-data">
				<div class="row" style="margin-bottom: 15px">
					<div class="col-lg-6">
						<div class="form group" style="margin-bottom: 15px; width:70% ">
							<label class="control-label">Please select a file to
								upload :</label> <input type="file" class="form-control" name="file" />
						</div>
					</div>
					<div class="col-lg-6">
						<div class="row" style="margin-bottom: 10px">
							<div class="h3 m-t-xs m-b-xs">${user.username}</div>
						</div>
						<div class="row" style="margin-bottom: 10px">
							<span class="text-muted"><i class="icon-group"></i> <span
								class="text-bold" style="font-weight: 900">Title: </span> <c:out
									value="${title}" /></span>
						</div>
					</div>
				</div>
				<div class="row" style="margin-bottom: 15px">
					<div class="col-lg-6">
						<label class="control-label">Hometown:</label> <input
							class="form-control" style="width: 70%" type="text"
							name="hometown"
							value=<c:if test="${not empty hometown}"><c:out value="${hometown}"/></c:if>>
					</div>
					<div class="col-lg-6">
						<label class="control-label">Age:</label> <input
							class="form-control" type="number" style="width: 70%" name="age"
							value=<c:if test="${not empty age}">
						<c:out value="${age}"/> </c:if>>
					</div>
				</div>
				<div class="row" style="margin-bottom: 15px">
					<div class="col-lg-6">
						<label class="control-label">Liked Ingredients:</label> <input
							class="form-control" type="text" style="width: 70%" name="liked"
							placeholder="add comma between them"
							value=<c:if test="${not empty liked}">
		<c:out value="${liked}"/> </c:if>>
					</div>
					<div class="col-lg-6">
						<label class="control-label">Hated Ingredients:</label> <input
							class="form-control" type="text" style="width: 70%" name="hated"
							placeholder="add comma between them"
							value=<c:if test="${not empty hated}"> 
			<c:out value="${hated}"/> </c:if>>
					</div>
				</div>
				<div class="row" style="margin-bottom: 15px">
					<div class="col-lg-6">
						<label class="control-label">Diet Preference:</label> <input
							class="form-control" type="text" style="width: 70%" name="diet"
							value=<c:if test="${not empty diet}"> 	
			<c:out value="${diet}"/> </c:if>>
					</div>
					<div class="col-lg-6">
						<label class="control-label">BIO:</label> <input
							class="form-control" type="text" style="width: 70%" name="bio"
							value=<c:if test="${not empty bio}"> 
			<c:out value="${bio}"/> </c:if>>
					</div>
				</div>
				<div class="row" style="margin-bottom: 15px">
					<div class="row font-bold">
						<h5 style="margin: 30px; font-weight: 600">Current
							Ingredients:</h5>
					</div>
				</div>
				<div class="row" style="margin-bottom: 15px">
					<div class="col-lg-2">
						<div class="form group">
							<label class="control-label">Amount:</label> <select id="amount"
								class="form-control m-b">
								<option value="1" selected="selected">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
								<option value="4">4</option>
								<option value="5">5</option>
								<option value="6">6</option>
								<option value="7">7</option>
								<option value="8">8</option>
								<option value="9">9</option>
								<option value="10">10</option>
								<option value="11">15</option>
								<option value="12">20</option>
								<option value="13">25</option>
								<option value="14">50</option>
								<option value="15">75</option>
								<option value="16">100</option>
								<option value="17">125</option>
								<option value="18">150</option>
								<option value="19">250</option>
								<option value="20">500</option>
								<option value="21">750</option>
								<option value="22">1000</option>
								<option value="23">0.25</option>
								<option value="24">0.5</option>
								<option value="25">0.75</option>
							</select>
						</div>
					</div>
					<div class="col-lg-2">
						<div class="form group">
							<label class="control-label">Quantity</label>
							<c:if test="${not empty units}">
								<select id="much" class="form-control m-b">
									<c:forEach var="text" items="${units}">
										<option value="${text.name}">${text.name}</option>
									</c:forEach>
								</select>
							</c:if>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="form group">
							<label class="control-label">Name</label>
							<c:if test="${not empty ingredients}">
								<select id="ingredient" class="form-control m-b">
									<c:forEach var="text" items="${ingredients}">
										<option value="${text.name}">${text.name}</option>
									</c:forEach>
								</select>
							</c:if>
						</div>
					</div>
					<div class="col-lg-2">
						<div class="form group">
							<label class="control-label">Keyword</label>
							<c:if test="${not empty styles}">
								<select id="style" class="form-control m-b">
									<c:forEach var="text" items="${styles}">
										<option value="${text.name}">${text.name}</option>
									</c:forEach>
								</select>
							</c:if>
						</div>
					</div>
					<div class="col-lg-2">
						<a class="btn btn-warning btn-sm"
							style="margin-top: 22px; height: 34px" href="/createIngredient"><i
							class="icon-plus text"></i> <span class="text">Create
								Ingredient</span></a>

					</div>
				</div>
				<div class="row" style="margin-bottom: 15px">
					<div class="col-lg-12">
						<div class="btn-group btn-group-justified">
							<input type="button" class="btn btn-warning btn-xs"
								style="border-radius: 2px; width: 50%" onclick="addOpt()"
								id="addIngredient" value="Add Ingredient" /> <input
								type="button" class="btn btn-danger btn-xs"
								style="border-radius: 2px; width: 50%"
								onClick="removeItem(editdata)" id="removeIngredient"
								value="Delete Ingredient" />
						</div>
						<select class="form-control" id="myselect" name="editdata"
							multiple>
							<c:forEach var="text" items="${ingredientlist}">
								<option>${text}</option>
							</c:forEach>
						</select>
					</div>
				</div>
		</div>
		<div class="row" style="margin-bottom: 15px; margin-right: 15px">
			<div class="col-lg-9"></div>
			<div class="col-lg-3 text-right">
				<input type="submit" class="btn btn-primary" value="Save Profile"
					onClick="selectAllOptions('myselect')" />
			</div>
		</div>
		</form>
		</div>
	</section>
</body>